<!--  -->
<template>
  <div class=''>
    <!-- 通话设置弹框 -->
    <el-dialog
      title="通话设置详情"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="true"
      @close="closeDia"
      width="40%">
      <el-form
        ref="basicForm"
        :inline="false"
        size="small"
        :model="callConfigObj"
        class="demo-form-inline"
        label-position="left"
        :rules="updateConfig"
        label-width="220px">
        <div class="filter-container">
          <el-form-item label="数值" prop="configValue">
            <el-input v-model="callConfigObj.configValue"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <el-form class="buttons">
        <el-button
          type="primary"
          class="submitButton"
          v-permissions="'callConfig:update'"
          @click="addConfigUserRole">保存</el-button>
        <el-button
          class="resetButton"
          @click="closeDia">关闭</el-button>
      </el-form>
    </el-dialog>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      :header-cell-style="{ background:'#f8f8f9',color:'#515a6e'}"
      size="mini"
      style="width: 100%; margin-top: 5px;">
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="configValue"
        label="数值"
        width="90">
      </el-table-column>
      <el-table-column
        label="类型"
        width="90">
        <template slot-scope="scope">
          <span>{{ scope.row.type === 1 ? '通话数量' : scope.row.type === 2 ? '通话时长' : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        :show-overflow-tooltip="true"
        label="创建时间">
        <template slot-scope="scope">
          <span>{{ timestampToDate(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="getcallConfigDetail(scope.row)"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { callConfigList,callConfigUpdate } from '@/request/callConfigList';
import { timestampToDate } from '@/until/paramRou'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
        dialogVisible: false,
        tableData: [],
        callConfigObj: {
          // configValue: ''
        },
        updateConfig: {
          configValue: [
            { required: true, trigger: 'blur', message: '请输入数值' }
          ]
        }
      };
    },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 关闭详情
    closeDia(){
      this.dialogVisible = false
      this.getcallConfig()
    },
    // 获取童话设置列表
    getcallConfig(){
      callConfigList().then(res => {
        // console.log(res);
        if(res.code === '200') {
          this.tableData = res.data
        } else {
          this.tableData = []
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      }).catch(err => {
        this.$message({
          message: '服务器忙~',
          type: 'warning'
        })
      })
    },
    // 童话设置详情
    getcallConfigDetail (item) {
      this.dialogVisible = true
      this.callConfigObj = item
    },
    // 保存修改详情按钮
    addConfigUserRole () {
      let obj = {};
      obj.configId =  this.callConfigObj.id;
      obj.value = this.callConfigObj.configValue;
      callConfigUpdate(obj).then(res => {
        if (res.code === '200') {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.getcallConfig()
          this.dialogVisible = false
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      }).catch(err => {
        this.$message({
          message: '服务器忙~',
          type: 'warning'
        })
      })
    },
    // 重置 - 搜索 - 新增
    resetQuery(fromName) {
      // this.resetForm(fromName)
      this.$refs[fromName].resetFields();
      this.isShowaddRole = false
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getcallConfig()
  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
  
.buttons {
  width: 100%;
  text-align: center;
}
</style>
